<template>
	<view class="" style="width: 100vw;height: 100vh">
	<!-- <view  style="min-height: 100vh"> -->
	 <view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		
		<!-- <image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
		<hx-navbar title="查看下级" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden" transparent="auto"></hx-navbar>
		<view class="container">
			<view class="invite_item" v-for="item,id in list" :key="id">
				<image :src="item.avatar" class="invite_head" mode="aspectFill"></image>
				<view class="invite_info">
					{{item.nickname}}

					<view class="small_text top10">
						电话:{{item.mobile}}
						<!-- {{item.real_status? '已实名':''}} {{item.has_order? '已下单':''}} -->
					</view>

				</view>
				<view class="right_box">
					<view class="small_text ">
						加入时间: {{item.ctime}}
					</view>
					<view class="small_text top10">
						推荐人: {{item.recommend_username}}
					</view>
					<view class="small_text ">
						<!-- <text style="color: #59B236;" v-if="item.real_status==1">邀请成功</text>
						<text v-else class="color-D78E65">待邀请成功</text> -->
						<!-- {{item.real_status? '已实名':''}} {{item.has_order? '已下单':''}} -->
					</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
			 
				page: 1,
				limit: 10,
				hasNextPage: true,
				list: []
			}
		},
		onLoad(options) {
			if (options.id) this.id = options.id;
			this.get_data_list()
		},

		onReachBottom() {
			if (this.hasNextPage) {
				let new_page = this.page + 1;
				let data = {
					id: this.id,
					page: new_page,
					limit: this.limit
				}
				this.$api.getInviteList(data, res => {
					if (res.status) {
						this.list = this.list.concat(res.data);
						this.hasNextPage = res.data.length >= this.limit;
						this.page = new_page
					}
				})
			}
		},
		methods: {
			get_data_list: function() {
				let data = {
					id: this.id,
					page: this.page,
					limit: this.limit
				}
				this.$api.getInviteList(data, res => {
					if (res.status) {
						this.list = res.data;
						this.hasNextPage = res.data.length >= this.limit
					}
				})
			}
		}
	}
</script>

<style>
	.submit {
		width: 320rpx;
		height: 45rpx;
		background-color: #d5b369;
		color: #fff;
		font-size: 26rpx;
	}

	.inputerr {
		width: 100%;
		border-bottom: 1rpx solid #9B9CA0;
		font-size: 28rpx;
		color: #9B9CA0;
		height: 50rpx;
		margin: 30rpx 0;

		text-align: center;
	}

	.inviter_title {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		color: #d5b369;

	}

	.my_inviter {
		width: 100%;
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		border-radius: 30rpx;
		margin-bottom: 30rpx;
	}

	.top10 {
		margin-top: 10rpx;
	}

	.see_detail text {
		position: relative;
	}

	.see_detail {
		width: 140rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #EE8553;
		position: relative;
		margin-bottom: 10rpx;
		border-radius: 24rpx;
		opacity: 1;
		border: 1rpx solid #EE8553;
	}

	.right_box {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.small_text {
		line-height: 40rpx;
		font-size: 20rpx;
		color: #000;
		font-weight: normal;
	}

	.invite_info {
		flex: 1;
		font-size: 28rpx;
		color: #000;
		font-weight: bold;
	}

	.invite_head {
		height: 72rpx;
		width: 72rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.invite_item {
		width: 100%;
		height: 138rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		display: flex;
		/* border-bottom: 1rpx solid #d9d9d9; */
		margin-bottom: 20rpx;
	}

	.container {
		width: 100%;
		padding: 20rpx 40rpx;
	}

	page {}
</style>